<template>
  <div>
    <van-cell-group>
      <van-field
        v-model="username"
        clearable
        label="用户名"
        placeholder="请输入用户名"
      />
      <van-field
        v-model="idCardNo"
        clearable
        maxlength='6'
        label="身份证后六位"
        placeholder="请输入身份证后六位"
      />
      <van-field
        v-model="telphone"
        clearable
        maxlength='6'
        type="tel"
        label="手机号"
        placeholder="请输入手机号"
      />
      <van-field
        v-model="oldCoin"
        label="原始积分"
        disabled
        type="number"
      />
      <van-field
        v-model="coin"
        clearable
        label="积分"
        type="number"
        placeholder="请输入积分"
      />
    </van-cell-group>
    <van-button
      style="margin:0.5rem 0"
      type="primary"
      size="large"
      @click="search"
    >查询</van-button>
    <van-button
      type="primary"
      size="large"
      @click="submit"
    >提交</van-button>
  </div>
</template>
<script>
import { Toast, Dialog, Field, CellGroup, Button } from 'vant';
export default {
  components: {
    'van-field': Field,
    'van-button': Button,
    'van-cell-group': CellGroup
  },
  data() {
    return {
      username: '',
      idCardNo: '',
      telphone: '',
      oldCoin: '0',
      hasSearch: false,
      coin: ''
    };
  },
  methods: {
    search() {
      if (this.username.length <= 0) {
        Toast('请输入正确的用户名');
      } else if (this.idCardNo.length !== 6) {
        Toast('请输入正确的身份证后六位');
      } else if (this.telphone.length !== 6) {
        Toast('请输入正确的手机号');
      } else {
        this.$http
          .post('upload/queryCoin', {
            username: this.username,
            idCardNo: this.idCardNo,
            telphone: this.telphone
          })
          .then(res => {
            console.log(res);
            this.hasSearch = true;
            this.oldCoin = res.data.object;
          });
      }
    },
    submit() {
      if (this.username.length <= 0) {
        Toast('请输入正确的用户名');
      } else if (this.idCardNo.length !== 6) {
        Toast('请输入正确的身份证后六位');
      } else if (this.telphone.length !== 6) {
        Toast('请输入正确的手机号');
      } else if (!this.hasSearch) {
        Toast('请先查询该用户信息');
      } else if (this.coin.length <= 0) {
        Toast('请输入正确的积分');
      } else {
        Dialog.confirm({
          title: '提示',
          message: '确认提交吗?'
        })
          .then(() => {
            this.$http
              .post('upload/addWhiteList', {
                username: this.username,
                idCardNo: this.idCardNo,
                telphone: this.telphone,
                coin: (this.coin - this.oldCoin).toString()
              })
              .then(res => {
                if (res.data.code === '0') {
                  Toast('添加成功');
                  this.username = '';
                  this.idCardNo = '';
                  this.telphone = '';
                  this.coin = '';
                  this.hasSearch = false;
                  this.oldCoin = '0';
                } else {
                  Toast(res.data.message);
                }
              });
          })
          .catch();
      }
    }
  }
};
</script>